<script setup>
import {ref, watch} from "vue"
import {use} from 'echarts/core'
import {PieChart} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import {CanvasRenderer} from 'echarts/renderers'

use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer
])

const option = ref({
  title: {},
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

const props = defineProps({
  option: {
    type: Object,
    default: (() => {
    })
  }
})
watch(() => props.option, (val) => {
  if (val) {
    option.value.series[0].data = val.data
  }
}, {immediate: true})
</script>

<template>
  <v-chart :option="option" class="chart"></v-chart>
</template>

<style scoped>
.chart {
  height: 100%;
}
</style>